<template>
  <div style="display: flex; flex-wrap: wrap; gap: 20px;" >
    <div class="cardWrap" >
      <StepBonus
        :key="1"
        title="项目硬件提成部分"
        ref="hardware"
        :count="engineConfig.hardware.count"
        :edit="isEdit"
        :rates="engineConfig.hardware.rates"
        :steps="engineConfig.hardware.steps"
        :marks="engineConfig.hardware.marks"
      />
    </div>
    <div class="cardWrap" >
      <StepBonus
        :key="2"
        title="项目软件提成部分"
        ref="software"
        :count="engineConfig.software.count"
        :edit="isEdit"
        :steps="engineConfig.software.steps"
        :rates="engineConfig.software.rates"
        :marks="engineConfig.software.marks"
      />
    </div>
    <div class="cardWrap" >
      <ProdBonus
        title="项目经理毛利奖金"
        ref="bonus"
        :count="engineConfig.bonus.count"
        :edit="isEdit"
        :rates="engineConfig.bonus.rates"
        :marks=" ['完成项目立项时设定的毛利目标', '完成项目立项时设定的工期目标', '完成项目立项时设定的质量目标', '完成项目的其它要求根据《项目审查表》完成情况']"
      />
    </div>
    <div class="cardWrap" >
      <EnginerRates
        title="工程组提成比率"
        ref="enginerRates"
        :ext13="engineConfig.rates.ext13"
        :ext14="engineConfig.rates.ext14"
        :ext15="engineConfig.rates.ext15"
        :edit="isEdit"
      />
    </div>
    <!-- <div class="cardWrap" v-if="demo" >
      <DemoCard
        title="模拟"
      />
    </div> -->
  </div>
</template>

<script>

import PerformBonus from './compontents/PerformBonus'
import StepBonus from './compontents/StepBonus'
import ProdBonus from './compontents/ProdBonus'
// import DemoCard from './compontents/DemoCard'
import EnginerRates from './compontents/EnginerRates'

export default {
  name: 'EngineCards',
  components: {
    PerformBonus,
    StepBonus,
    ProdBonus,
    // DemoCard,
    EnginerRates
  },
  props: {
    isEdit: {
      type: Boolean,
      default: () => false
    },
    engineConfig: {
      type: Object,
      default: () => {}
    },
    demo: {
      type: Boolean,
      default: () => true
    }
  },
  data () {
    return {
      // edit: false
    }
  },
  methods: {
    getConfig () {
      /**
       * hardware 硬件提成
       * software 软件提成
       * bonus 项目毛利奖金
       * staticBonus 项目组固定提成
       */
      const hardware = this.$refs.hardware.getValue()
      const software = this.$refs.software.getValue()
      const bonus = this.$refs.bonus.getValue()
      const rates = this.$refs.enginerRates.getValue()

      return { hardware, software, bonus, rates }
    }
  }
}
</script>
<style lang="less" scoped>
.cardWrap {
  width: calc(50% - 40px);
}
</style>
